<template>
    <div id="storemanagement">
   
      <div class="head">
        <div class="left">
          <router-link to="/StoreManagement/StoreManagementAdd"><i class="el-icon-plus"></i> 添加</router-link>
        </div>
        <div class="right">
          <el-input v-model="input_supplier" placeholder="请输入门店"></el-input>
          <el-input v-model="input_store" placeholder="请输入供货商"></el-input>
          <el-input v-model="input_drug" placeholder="请输入负责人"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
      </div>
        
      <div class="content">
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%;" class="tableStyle">
            <el-table-column
                prop="store"
                label="门店"
                >
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址"
                width="150">
            </el-table-column>
            
            <el-table-column
                prop="name"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="logo"
                label="LOGO">
            </el-table-column>
            <el-table-column
                prop="director"
                label="负责人">
            </el-table-column>
            <el-table-column
                prop="tel"
                label="联系方式"
                width="150">
            </el-table-column>
            <el-table-column
                prop="time_star"
                label="营业开始时间">
            </el-table-column>
            <el-table-column
                prop="time_end"
                label="营业结束时间">
            </el-table-column>
            <el-table-column
                prop="others"
                label="备注">
            </el-table-column>
            
            <el-table-column width="200px" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="bottom">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>    
    </div>
    
</template>
<script>
   export default {
      data() {
        return {
          input_supplier: '',
          input_store: '',
          input_drug: '',
          // 表格数据
          tableData: [{
            id:'1',
            store: '1店',
            address: '1',
            name: 'xxx',
            logo: '退烧药',
            director: 'n',
            tel: '11', 
            time_star:'8am' ,
            time_end:'9pm',
            others:'无'         
          }, {
            id: '2',
            store: '1店',
            address: '1',
            name: 'xxx',
            logo: '退烧药',
            director: 'n',
            tel: '11', 
            time_star:'8am' ,
            time_end:'9pm',
            others:'无'     
          }, {
            id: '3',
            store: '1店',
            address: '1',
            name: 'xxx',
            logo: '退烧药',
            director: 'n',
            tel: '11', 
            time_star:'8am' ,
            time_end:'9pm',
            others:'无'     
          }, {
            id: '4',
            store: '1店',
            address: '1',
            name: 'xxx',
            logo: '退烧药',
            director: 'n',
            tel: '11', 
            time_star:'8am' ,
            time_end:'9pm',
            others:'无'     
          }, {
            id: '5',
            store: '1店',
            address: '1',
            name: 'xxx',
            logo: '退烧药',
            director: 'n',
            tel: '11', 
            time_star:'8am' ,
            time_end:'9pm',
            others:'无'     
          }]
        }
      },
      methods: {
        // 搜索方法
        search() {
          if(this.input_supplier === '' || this.input_store === '' || this.input_drug === '') {
            alert("内容不能为空")
            return;
          }
          // console.log(this.input_supplier + this.input_store + this.input_drug)
          this.$confirm('你确定要执行此操作吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$message({
              type: 'success',
              message: '搜索成功!'
            });
            this.tableData = this.tableData.filter(item => item.supplier === this.input_supplier && item.store === this.input_store  && item.drug === this.input_drug);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消搜索'
            });
          });
        },
        // 修改列表数据方法
        handleEdit(index, row) {
          this.$router.push("/StoreManagement/StoreManagementEdit")
          console.log(index, row);
        },
        // 删除列表数据方法
        handleDelete(id) {
          this.$confirm('你确定要删除此数据吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.tableData = this.tableData.filter(item => item.id != id);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }, 
      }
    }
  </script>

<style lang="less">
  #storemanagement {
    // height: 100%;
    h1{
      margin-top: 40px;
      margin-left: 30px;
    }
    .content {      
      margin-left: 30px;
      margin-right: 30px;
    }
    .tableStyle {
      background-color: #e4f4fe;
    }
    th.el-table__cell {
      background-color: #e4f4fe;
    }
    .el-table__body {
      -webkit-border-vertical-spacing: 20px;
    }
    .head {
      display: flex;
      justify-content: space-between;
      margin: 30px;
      .left {
        width: 90px;
        height: 40px;
        background-color: #409eff;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        a {
          margin: auto;
          color: white;
        }
      }
      .right {
        .el-input {
          width: 160px; 
          margin-right: 30px; 
          .el-input__inner {
            border-radius: 20px;
            height: 35px;
          }
        }
      }
    }
  }

</style>